<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
    <tab-control
      :titles="['流行', '新款', '精选']"
      @tabclick="controlClick"
      ref="topControl"
      class="tabFixd"
      v-show="TabHide"
    >
    </tab-control>
    <scroll
      ref="backTops"
      class="content"
      :probeTypes="3"
      :pullUpload="true"
      @pullingUp="loadMore"
    >
      <home-swiper @swiperImageLoad="swiperImageLoad"></home-swiper>
      <home-reacommend :reacommends="recommend"></home-reacommend>
      <feature-views></feature-views>
      <tab-control
        :titles="['流行', '新款', '精选']"
        @tabclick="controlClick"
        ref="control"
      ></tab-control>
      <home-goods :good="isshow"></home-goods>
    </scroll>
    <back-top class="back-top" @click.native="topClick" v-show="hide" />
  </div>
</template>

<script>
import navBar from "components/common/navBar.vue";
import tabControl from "components/common/tab-control.vue";

import homeSwiper from "./childComps/homeSwiper.vue";
import homeReacommend from "./childComps/homeRecommend.vue";
import featureViews from "./childComps/FeatureView.vue";
import homeGoods from "components/content/goods/homeGoods.vue";
import scroll from "components/common/scroll.vue";
import backTop from "components/content/backTop.vue";

import { getHomeMultiData, getGoodsData } from "network/home.js";

import { mapGetters } from "vuex";

export default {
  name: "Home",
  components: {
    navBar,
    tabControl,

    homeSwiper,
    homeReacommend,
    featureViews,
    homeGoods,
    scroll,
    backTop,
  },
  data() {
    return {
      recommend: null,
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: "pop",
      clear: null,
      clear1: null,
      scroll: 0,
    };
  },
  created() {
    //请求swiper数据
    this.getHomeMultiDatas();
    //请求商品数据
    this.getGoodsDatas("pop");
    this.getGoodsDatas("new");
    this.getGoodsDatas("sell");
  },
  mounted() {
    this.$bus.$on("itemImageLoad", () => {
      clearTimeout(this.clear1);
      this.clear1 = setTimeout(() => {
        this.$refs.backTops &&
          this.$refs.backTops.scroll &&
          this.$refs.backTops.scroll.refresh();
      }, 500);
    });
  },
  computed: {
    ...mapGetters(["hide", "TabHide"]),
    isshow() {
      return this.goods[this.currentType].list;
    },
  },
  methods: {
    getHomeMultiDatas() {
      getHomeMultiData().then((res) => {
        this.recommend = res.data.recommend.list;
      });
    },
    getGoodsDatas(type) {
      let page = this.goods[type].page + 1;
      getGoodsData(type, 1).then((res) => {
        this.goods[type].page = page;
        this.goods[type].list.push(...res.data.list);
      });
      this.$refs.backTops && this.$refs.backTops.scroll.finishPullUp();
    },
    controlClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$refs.control.itemIndex = index;
      this.$refs.topControl.itemIndex = index;
    },

    topClick() {
      this.$refs.backTops.scroll &&
        this.$refs.backTops.scroll.scrollTo(0, 0, 1000);
    },

    loadMore() {
      clearTimeout(this.clear);
      this.clear = setTimeout(() => {
        this.getGoodsDatas(this.currentType);
      }, 500);
    },
    flixTop() {
      this.$store.commit("top", this.$refs.control.$el.offsetTop);
    },
    swiperImageLoad() {
      this.flixTop();
    },
  },
};
</script>

<style scoped>
#home {
  height: 100vh;
  position: relative;
}
.home-nav {
  background-color: var(--color-tint);
  color: azure;
}
.content {
  position: absolute;
  overflow: hidden;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
.back-top {
  position: fixed;
  bottom: 50px;
  right: 15px;
}
.tabFixd {
  position: fixed;
  top: 44px;
  right: 0;
  left: 0;
  z-index: 1;
}
</style>
